/**
 * 品牌类型页中部组件
 */
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useFactoryStore, useBrandStore, useModelStore } from '@/stores/type'
import { HomeFilled, Back } from '@element-plus/icons-vue'
import http from '@/axios/http'

const route = useRoute()
const router = useRouter()
const type = ref(route.query.type)

const factoryStore = useFactoryStore()
const brandStore = useBrandStore()
const modelStore = useModelStore()

const showHome = ref(false)
const showLast = ref(false)

const factoryCount = ref()
const brandCount = ref()
const modelCount = ref()

function getFactoryList() {
  http.post('/type/getFactoryList', {
    type: type.value
  }).then(res => {
    factoryStore.setData(res.data)
    factoryCount.value = res.data.length
  }).catch(err => {
    console.log(err)
  })
}

function getBrandList() {
  http.post('/type/getBrandList', {
    type: type.value
  }).then(res => {
    let arr = res.data.filter(item => item.color === 'Y')
    brandStore.setData(res.data)
    brandCount.value = arr.length
  }).catch(err => {
    console.log(err)
  })
}

function getModelCount() {
  http.post('/type/getModelCount', {
    type: type.value
  }).then(res => {
    modelCount.value = res.data
  })
}

function getModelList() {
  http.post('/type/getModelList', {
    type: type.value
  }).then(res => {
    modelStore.setData(res.data)
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  getFactoryList()
  getBrandList()
  getModelCount()
  getModelList()
})
</script>

<template>
  <div class="type-center-container">
    <div class="type-back">
      <div @click="router.push({ name: 'home' })" @mouseover="showHome = true" @mouseleave="showHome = false" class="type-to-home">
        <div class="type-back-item">
          <span v-if="!showHome">首页</span>

          <el-icon v-if="showHome" size="2vw"><HomeFilled/></el-icon>
        </div>
      </div>

      <div @click="router.back()" @mouseover="showLast = true" @mouseleave="showLast = false" class="type-to-last">
        <div class="type-back-item">
          <span v-show="!showLast">返回</span>

          <el-icon v-show="showLast" size="2vw"><Back/></el-icon>
        </div>
      </div>
    </div>

    <div @click="factoryStore.show()" class="type-center-factory">
      <img class="type-center-icon" src="@/assets/images/生产工厂.png" alt="生产工厂">

      <div class="type-center-title">
        生产工厂
      </div>

      <div class="type-center-value">
        {{ factoryCount }}
      </div>
    </div>

    <div @click="brandStore.show()" class="type-center-brand">
      <img class="type-center-icon" src="@/assets/images/品牌客户.png" alt="品牌客户">

      <div class="type-center-title">
        品牌客户
      </div>

      <div class="type-center-value">
        {{ brandCount }}
      </div>
    </div>

    <div @click="modelStore.show()" class="type-center-model">
      <img class="type-center-icon" src="@/assets/images/型体支数.png" alt="型体支数">

      <div class="type-center-title">
        型体支数
      </div>

      <div class="type-center-value">
        {{ modelCount }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.type-center-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  color: white;
  font-weight: normal;
  text-align: center;
  pointer-events: auto;

  .type-back {
    width: 20vw;
    height: 6vw;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .type-to-home {
      width: 8vw;
      height: 5vw;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &:hover .type-back-item {
        width: 4vw;
        border-radius: 2vw;
        background-color: royalblue;
      }

      .type-back-item {
        width: 7vw;
        height: 4vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5vw;
        font-weight: normal;
        border-radius: 2vw;
        background-color: slateblue;
        transition: all 0.3s ease-in-out;
      }
    }

    .type-to-last {
      width: 8vw;
      height: 5vw;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &:hover .type-back-item {
        width: 4vw;
        border-radius: 2vw;
        background-color: royalblue;
      }

      .type-back-item {
        width: 7vw;
        height: 4vw;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5vw;
        font-weight: normal;
        border-radius: 2vw;
        background-color: slateblue;
        transition: all 0.3s ease-in-out;
      }
    }
  }

  .type-center-factory, .type-center-brand, .type-center-model {
    height: 100%;
    margin: 0 1.5%;
    padding: 0.5% 1%;
    box-sizing: border-box;
    border-radius: 2vh;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease-in-out;
    
    &:hover{
      box-shadow: 0 0 10px white;
      filter: hue-rotate(45deg);
    }

    .type-center-icon {
      width: 3vh;
      height: 3vh;
      margin-right: 1vh;
      vertical-align: sub;
    }

    .type-center-title {
      display: inline;
      font-size: 2.5vh;
    }

    .type-center-value {
      font-size: 6vh;
    }
  }
}
</style>